<script setup lang="ts">
/// <reference path="../auto-imports.d.ts" />
import { Button as TinyButton, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
import { IconArrowDown } from "@opentiny/vue-icon";
import Viewer from "./components/Viewer.vue"
import { onMounted, ref } from 'vue';
import { ButtonGroup as TinyButtonGroup, Notify } from '@opentiny/vue'
import type { IButtonGroupNode } from '@opentiny/vue-renderless/types/button-group.type';
import { FaBeerMugEmpty } from "@kalimahapps/vue-icons";

// const TinyIconArrowUp = IconArrowUp()
const TinyIconArrowDown = IconArrowDown()

const maps = ref([] as IButtonGroupNode[])
const currentVal = ref("")

const upload = async () => {
  await window.aardio.uploadFile("node")
}
const down = async () => {
  await window.aardio.downTpl()
}

const getMaps = async () => {
  var files = await window.aardio.getMaps()
  if (files) {
    if (maps.value.length > 0) {
      maps.value.splice(0, maps.value.length)

    }
    maps.value = files.map((item: string) => {
      return {
        text: item.replace(".svg", "").replace("能流图_", ""),
        value: `tmp/能流图/${item}?t=${Math.random()}`
      }
    })
    if (maps.value.length > 0) {
      currentVal.value = maps.value[0].value

    }
  }
}



const genMaps = async () => {
  try {
    await window.aardio.genMaps()
    await getMaps()
    Notify({
      type: 'success',
      title: () => "标题",
      message: '生成成功',
      position: 'top-right',
      duration: 2000
    })
  }
  catch {
    Notify({
      type: 'error',
      title: () => "标题",
      message: '生成出现错误，请检查数据',
      position: 'top-right',
      duration: 5000
    })
  }
}

const exportMaps = async () => {
  await window.aardio.exportMaps()
}

onMounted(async () => await getMaps())


</script>
<template>
  <div class="container">
    <div class="content">

      <div class="card">
        <div class="tag-group-container">
          <tiny-button-group :data="maps" v-model="currentVal"></tiny-button-group>
        </div>

        <viewer :svg-url="currentVal" v-if="currentVal != ''" />
        <div class="no-container" v-else>
          <div>
            <FaBeerMugEmpty class="icon" />
          </div>
          <div class="text">暂无数据</div>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="card">
        <tiny-layout :cols="24">
          <tiny-row>
            <tiny-col :span="24">
              <div class="icon-box">
                <tiny-button @click="down" :icon="TinyIconArrowDown" type="text" size="large" />
              </div>
              <tiny-button @click="down" type="text" text="下载模板"> </tiny-button>
            </tiny-col>
            <tiny-col :span="24">
              <div class="icon-box">
                <tiny-button @click="upload" :icon="TinyIconArrowDown" type="text" size="large" />
              </div>
              <tiny-button @click="upload" type="text" text="上传数据"> </tiny-button>
            </tiny-col>
            <tiny-col :span="24">
              <div class="icon-box">
                <tiny-button @click="genMaps" :icon="TinyIconArrowDown" type="text" size="large" />
              </div>
              <tiny-button @click="genMaps" type="text" text="生成能流图"> </tiny-button>
            </tiny-col>

            <tiny-col :span="24">
              <div class="icon-box">
                <tiny-button @click="getMaps" :icon="TinyIconArrowDown" type="text" size="large" />
              </div>
              <tiny-button @click="getMaps" type="text" text="查看能流图"> </tiny-button>
            </tiny-col>

            <tiny-col :span="24">
              <div class="icon-box">
                <tiny-button @click="exportMaps" :icon="TinyIconArrowDown" type="text" size="large" />
              </div>
              <tiny-button @click="exportMaps" type="text" text="导出"> </tiny-button>
            </tiny-col>
          </tiny-row>
        </tiny-layout>

      </div>



    </div>

  </div>

  <!-- <Viewer /> -->
</template>

<style scoped>
.container {
  margin: 0;
  display: flex;
  background-color: azure;
  height: calc(100%);
  width: calc(100% - 20px);
}

.container .tag-group-container {
  margin: 10px;
  text-align: right;
}

.container .tag-group-container span::after {
  cursor: pointer;

}


.container .nav {
  width: 120px;
  text-align: center;
  margin: 0 10px;

}

.container .nav .icon-box:hover {
  background: #eee;

}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin: 20px 0;
  /* padding: 20px; */
  color: #010407;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
}

.content .card {
  flex: 1 1 auto;
  align-items: stretch;
}

.card:hover {
  box-shadow: 0 3px 10px 0 rgb(64 98 225 / 45%);
}

.container .content {
  margin: 0 10px;
  flex: 1;
  display: flex;
  flex-flow: column;
  align-items: stretch;
}

.no-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  text-align: center;
  /* 垂直居中 */
}

.no-container .icon {
  color: grey;
  font-size: 15em;
}

.no-container .icon:hover {
  background-color: #eee;
}

.no-container .text {
  font-weight: bold;
}
</style>
